<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/swiper.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4002669_pgzcltvotc.css" />
  <link rel="stylesheet" href="css/index.css" />
  <title>智慧商城</title>
</head>

<body>
  <div id="app">
    <!-- header -->
    <header>智慧商城</header>

    <!-- search -->
    <div class="search">
      <a href="javascript:;" class="searchCont">
        <i class="iconfont icon-sousuo"></i>
        <p>搜索商品</p>
      </a>
    </div>

    <!-- banner -->
    <div class="banner">
      <!-- swiper -->
      <div class="swiper">
        <!-- ============================= 轮播图 Start =================================== -->
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for = "(item,index) in imglist" :key = "item.id">
            <a href="javascript:;">
              <img :src= "item.imgUrl" alt="" />
            </a>
          </div>
          
        </div>
        <!-- ============================= 轮播图 End =================================== -->

        <!--分页器-->
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <!-- 广告 -->
    <div class="ad">
      <i class="iconfont icon-shengyin_shiti"></i>
      <div class="adCont">
        <p>智慧商城2.0全新上线，更多新品等你来选~</p>
      </div>
    </div> 

    <!-- ============================= 新品首发 Start =================================== -->
    <div class="main">
      <section class="section1">
        <a href="javascript:;" v-for = "(item,index) in list" :key = "item.id">
          <div>
            <img :src= "item.imgUrl"  alt="" />
          </div>
          <p>{{ item.text }}</p>
        </a>
      </section>
      <!-- ============================= 新品首发 End =================================== -->

        <a href="javascript:;">
          <img src="http://cba.itlike.com/public/uploads/10001/20230320/647c6bde4b1f1a3e88955e5f596344f9.png" alt="" />
        </a>
      </section>
      
      <section class="section3">
        <h2>——&nbsp;&nbsp;猜你喜欢&nbsp;&nbsp;——</h2>

        <!-- ============================= 商品组 Start =================================== -->
        <ul class="section3Ul">
          <li v-for = "(item,index) in goodlist" :key = "item.id">
            <a href="javascript:;">
              <img :src= item.goods_image alt="" />
              <div class="goodCont">
                <h3>{{ item.goods_name }}</h3>
                <p class="selled">已售{{item.goods_sales}}件</p>
                <p class="price"> ¥{{item.goods_price_max}}<span>¥{{item.line_price_max}}</span></p>
              </div>
            </a>
          </li>
        </ul>
        <!-- ============================= 商品组 Start =================================== -->
      </section>
    </div>

    <!-- footer -->
    <footer>
      <a href="javascript:;" class="cur">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-fenlei"></i>
        <p>分类</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-gouwuche"></i>
        <p>购物车</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </a>
    </footer>
  </div>
</body>
<script src="./js/axios.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      list:[],
      goodlist:[],
      imglist:[]
    },
    created(){
      this.shoplist()
    },
    methods:{
      async shoplist(){
        const res = await axios.get(
          'https://smart-shop.itheima.net/index.php?s=/api/page/detail'
        )
        console.log(res.data.data.pageData.items)
        this.list = res.data.data.pageData.items[3].data
        this.goodlist = res.data.data.pageData.items[6].data
        this.imglist = res.data.data.pageData.items[1].data
      }
    }
  })
</script>

</html>